<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            body{
                margin:0px;
                padding:0px;
                background: #ebebeb;
             }
             a{
                text-decoration: none;
             }
             #demo{
                width:300px;
                height:400px;
                border: 1px solid gray;
                position: relative;
                top:100px;
                left:400px; 
                overflow: hidden;
             }
             #demos{
                width:300px;
                height:2800px;
                float:left;
                position: absolute;
                top:0px;
                left:0px;
             }
             img{
                width:300px;
                height:400px;
                float:left;
             }
             #buttons{
                width:50px;
                height:255px;
                background-color:white;
                position: relative;
                top:-230px;
                left:720px;
             }
             #buttons span{
                width:50px;
                height:50px;
                background-color:rgba(225,225,115,.9); 
                float:left;
                margin-top: 1px;
                text-align: center;

             }
            #buttons .on{
                 background-color:gray;
             }
             #shang{
                width:50px;
                height:50px;
                background:yellow;
                position: absolute;
                top:430px;
                left:720px;
                border: none;
             }
             #xia{
                width:50px;
                height:50px;
                background:yellow;
                position: absolute;
                top:120px;
                left:720px;
                border: none;
             }
        </style>
    </head>
    <body>
          <div id="demo">
                   <div id="demos" style="top:-400px;">
                         <img src="./img/e.jpg" alt="5">
                         <img src="./img/a.jpg" alt="1">
                         <img src="./img/b.jpg" alt="2">
                         <img src="./img/c.jpg" alt="3">
                         <img src="./img/d.jpg" alt="4">
                         <img src="./img/e.jpg" alt="5">
                         <img src="./img/a.jpg" alt="1">
                   </div>
           </div>
           <div id="buttons">
                    <span index="1" class='on'>1</span>  
                    <span index="2" class>2</span> 
                    <span index="3" class>3</span>
                    <span index="4" class>4</span> 
                    <span index="5" class>5</span>
           </div>
           <input type="button" value="xia" id="shang">
           <input type="button" value="shang" id="xia">
         
    </body>
     <script>
      window.onload = function(){
        var demo = document.getElementById('demo');
        var demos = document.getElementById('demos');
        var buttons = document.getElementById('buttons').getElementsByTagName('span');
        var shang = document.getElementById('shang');
        var xia = document.getElementById('xia');
        var index = 1;  //控制按钮
        var animated = false;
        var timer;


        function showbutton(){  //有关右边的按钮的函数
            for(var i=0;i<buttons.length;i++){
                if(buttons[i].className == 'on'){
                   buttons[i].className = '';
                   break;
                }
            }
          buttons[index - 1].className = 'on';
        }

        function antimate(setoff){   
            animated = true;
            var newtop = parseInt(demos.style.top) + setoff;
            var time = 600;
            var interval = 10;
            var speed = setoff/(time/interval);

            function go(){
            if((speed < 0 && parseInt(demos.style.top) > newtop) || (speed > 0 && parseInt(demos.style.top) < newtop) ){
                    demos.style.top = parseInt(demos.style.top) + speed + 'px';
                    setTimeout(go,interval);
                }
            else{
                animated = false;
              demos.style.top = newtop + 'px'; 
              if(newtop  > -400){    //注意：这里是newtop 的值来判断的  不是他本身 要加上setoff的值的
                 demos.style.top = -2000 + 'px';
              }
             if( newtop  < -2000){
                 demos.style.top = -400 + 'px';
              }
            }
          }
          go();
        };
        function play(){
             timer = setInterval(function(){
                shang.onclick();
             },3000);
        }
        function stop(){
            clearInterval(timer);
        }
        shang.onclick = function(){
            if(index == 5){
                index = 1;
            }
            else{
            index +=1;
            }
            showbutton();
            if(animated == false){
            antimate(-400);
            }
        }
        xia.onclick = function(){
            if(index == 1){
                index = 5;
            }
            else{
            index -=1;
            }
            showbutton();
            if(animated == false){
            antimate(400);
            }
        }

         for(var i = 0;i<buttons.length;i++){
            buttons[i].onclick = function(){
                if(this.className == 'on'){  //优化工作
                    return;
                }
                var myindex = parseInt(this.getAttribute('index'));
                var offset = -400*(myindex - index);
                if(animated == false){
                antimate(offset);
                }
                index = myindex;
                showbutton();
            }
         }

         demo.onmouseover = stop;
         demo.onmouseout = play;
         play();

       }
    </script>
</html>